@import "../Lw-base";
.page {
    background: transparent;
    padding: 0;
    height: 100%;
}
.page-container {
    display: flex;
    flex-direction: column;
}
.page-title {
    .add {
        height: 40px;
        display: flex;
        align-items: center;
        width: 149px;
        justify-content: center;
        img {
            display: block;
            margin-right: 4px;
        }
    }
}

.table-box {
    padding: 24px 30px;
    flex: 1;
    .list {
        display: grid;
        grid-template-columns: repeat(auto-fill, 150px);
        grid-template-rows: repeat(auto-fill, 210px);
        grid-row-gap: 30px;
        grid-column-gap: 24px;
        .item {
            width: 150px;
            height: 210px;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            &:hover {
                .zz {
                    display: block;
                    background: rgba(0, 0, 0, 0.2);
                    .desc {
                        background: rgba(#2f3137, 0.9);
                    }
                    .close {
                        display: flex;
                        cursor: pointer;
                    }
                    .name {
                        .modify {
                            display: block;
                        }
                    }
                }
            }
            .zz {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 1;
                background: rgba(0, 0, 0, 0);
                .close {
                    width: 28px;
                    height: 28px;
                    border-radius: 0px 0px 0px 8px;
                    background: rgba(125, 1, 33, 0.7);
                    position: absolute;
                    z-index: 1;
                    top: 0;
                    right: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    display: none;
                    &-icon {
                        width: 18px;
                        height: 18px;
                    }
                }
            }
            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .desc {
                position: absolute;
                bottom: 0;
                height: 52px;
                background: rgba(125, 1, 33, 0.7);
                color: #fff;
                text-align: center;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .name {
                    font-weight: 700;
                    position: relative;
                    .modify {
                        position: absolute;
                        width: 18px;
                        height: 18px;
                        top: 0;
                        display: none;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

.table-box {
    .add {
        margin-bottom: 15px;
    }
}
.pagination-box {
    text-align: center;
    margin: 24px 0;
}

.page {
    position: relative;
}
.exp {
    width: auto;
    height: 50px;
    margin-left: 10px;
}
